<template>
  <div>
    爷爷组件
    <hr />
    <Child />
  </div>
</template>
<!--
<script>
import Child from './Child.vue'
export default {
  name: 'ProvideInject',
  components: {
    Child
  },
  data() {
    return {
      msg: '爷爷组件的msg'
    }
  },
  /*   provide: {
    grandpaMsg: '爷爷组件的msg'
  } */
  provide() {
    // 通过this可以拿到当前组件，可以在此做一些业务
    return {
      grandpaMsg: this.msg
    }
  }
}
</script> -->
<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'
defineOptions({
  name: 'ProvideInject'
})
const msg = ref('爷爷组件的msg')
const msg1 = ref('你好啊')
provide('grandpaMsg', msg)
provide('gMsg', msg1)
</script>
